<template>
  <div class="main">
      <div class="header">
              <span>
                  <img src="~assets/img/dlogo.png" alt="">
                  </span>
                  <span>Y优商城</span>
      </div>
      <div class="content">
          <!-- <div class="content-left">
              <el-button icon="el-icon-user">认证注册</el-button>
          </div> -->
          <div class="content-right">
             <p>Y优账号注册</p>
              <p>已有账号？<el-link :underline="false" @click="goHome">去登陆 ></el-link></p>

             <div class="box-write">
          <el-form :model="registForm" :rules="registRules" ref="registFormRef">
           <el-form-item prop="name">
              <el-input v-model="registForm.name" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="pwd">
              <el-input v-model="registForm.pwd" show-password autocomplete placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="rpwd">
              <el-input v-model="registForm.rpwd" show-password autocomplete placeholder="确认密码"></el-input>
            </el-form-item>
          <el-form-item prop="email">
              <el-input v-model="registForm.email" autocomplete placeholder="邮箱" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="box-regiseter-btn">
          <el-button type="primary" @click="goRegistnow">立即注册</el-button>
        </div>
          </div>
      </div>
      <div class="footer">
          <span>Y优账号及用户协议</span>
          <span>关于Y优账号与隐私的声明</span>
          <span>常见问题</span>
          <span>关于公司</span>
          <p>Y优账号 版权所有© 2020-2021</p>
      </div>
  </div>
</template>

<script>
import {  goRegist } from 'network/request.js'
export default {
data(){
     const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registForm.rpwd !== "") {
          this.$refs.registFormRef.validateField("rpwd");
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registForm.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
        istrue: true,
        phoneselect:'',
          registForm: {
        captcha:'',
        name: "",
        pwd: "",
        rpwd: "",
        phone: "",
        email:'',
        accountName:'',
		school:''
      },
      codeImg: '',
      // 表单验证规则
      registRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
       email: [
          {
            required: true,
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        pwd: [{ validator: validatePass, trigger: "blur" }],
      rpwd: [{ validator: validatePass2, trigger: "blur" }],

      }
    }
},
methods:{
    goHome(){
    this.$router.push('/')
    },
    goRegistnow(){
      this.$refs.registFormRef.validate(async (valid) => {
        if (!valid) {
          return this.$message.error("请填写必要的注册信息！");
        }
        const loading = this.$loading({
          lock: true,
          text: '正在注册请稍等~~~',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      const {data: res} = await goRegist(this.registForm)
      console.log(res);
      if(res.status === 0){
          loading.close();
        this.$message.success('恭喜你申请账号成功！')
        this.$router.push('/');
      } else if(res.status === 1) {
          loading.close();
        this.$message.error('当前用户已被注册！')
      }
    
      })
}},
created(){
}
}
</script>

<style lang="scss" scoped>
.main {
   min-height: 100%;
  display: flex;
  flex-direction: column;
  background: url('~assets/img/blogo.jpg');
.header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #eee;
    span {
        font-weight: bold;
        padding: 0px 10px;
        img {
            width: 30px;
        }
    }
    span:nth-child(1) {
        border-right: 1px solid #ccc;
    }
    span:nth-child(2) {
        font-size: 12px;
    }
}
.content {
    flex: auto;
    box-sizing: border-box;
    display: flex;
    .content-left {
        flex: 1;
        .el-button {
            background-color: #eee;
            opacity: 0.8;
            margin-top: 40px;
            width: 100%;
        }
    }
    .content-right {
        margin-left: 60px;
        flex: 4;
            // text-align: center;
            p {
              padding-left: 200px;
            }
        p:first-child {
            padding: 80px 0px 10px 180px;
        font-size: 30px;

        }
    }
    .box-write {
        margin: 20px 100px;
        width: 20%;
		.el-select {
			width: 100%;
		}
    }
    .box-regiseter-btn {
        width: 20%;
        margin: 50px 100px;
        .el-button {
            width: 100%;
        }
    }
}
.footer {
  flex: 1;
    line-height: 44px;
    text-align: center;
    width: 100%;
    background-color: #eee;
    height: 88px;
    span {
        font-size: 12px;
        padding: 0px 20px;
        border-right: 1px solid #ccc;
    }
    span:nth-child(4){
        border: none;
    }
    p {
        font-size: 12px;
        color: #aaa;
    }
}
}

</style>